<!DOCTYPE html>
<html class="no-js">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Demo</title>
    <link href="img/favicon.ico" rel="shortcut icon" />
    <link href="plugins/select2/select2.min.css" rel="stylesheet"
        type="text/css" />
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/font-awesome.min.css" />
    <link rel="stylesheet" href="css/ionicons.min.css" />
    <link rel="stylesheet"
        href="plugins/datatables/dataTables.bootstrap.css" />
    <link rel="stylesheet" href="css/AdminLTE.min.css" />
    <link rel="stylesheet" href="css/skins/_all-skins.min.css" />
    <link href="plugins/jstree/dist/themes/default/style.min.css"
	rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="plugins/bootstrap-validate/bootstrapValidator.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/app.css"/>
    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
</head>

<body>
	<div class="wrapper">
		<!-- Content Wrapper. Contains page content -->
		<div class="container-fluid">
			<!-- Content Header (Page header) -->
			<section class="content-header">
				<!-- <div style="font-size: 15px; font-weight: bold; color: #585858; margin-top: 10px">内部员工</div> -->
                <div class="nav-tabs-custom">
                    <ul id="myTab" class="nav nav-tabs">
                        <li class="active">
                            <a href="#insideEmp" data-toggle="tab"
                               style="font-size: 15px; font-weight: bold; color: #585858;"> 内部员工 </a>
                        </li>
                        <li><a href="#outsideEmp" data-toggle="tab"
                               style="font-size: 15px; font-weight: bold; color: #585858;"> 外部客户 </a></li>
                    </ul>
                </div>
                <div class="tab-content">
                    <div class="tab-pane active" id="insideEmp">
                        <div class="row">
                            <div class="col-lg-12 col-xs-12">
                                <div class="box box-default" style= "border: none;">
                                    <div class="box-header" style="padding-bottom: 0">
                                        <form class="form-horizontal" style="margin-left: 10px;">
                                            <div class="form-group" style="margin-top: 10px">
                                                <span class="col-sm-1 control-label no-padding search-label">用户登录号：</span>
                                                <div class="col-sm-1 no-padding">
                                                    <input type="text" id="q1" class="input-sm form-control"
                                                           placeholder="" />
                                                </div>

                                                <span class="col-sm-1 control-label no-padding search-label">用户姓名：</span>
                                                <div class="col-sm-1 no-padding">
                                                    <input type="text" id="q2" class="input-sm form-control"
                                                           placeholder="" />
                                                </div>

                                                <span class="col-sm-1 control-label no-padding search-label">性别：</span>
                                                <div class="col-sm-1 no-padding">
                                                    <select class="form-control input-sm select-width-70" id="q3">
                                                        <option>全部</option>
                                                        <option>男</option>
                                                        <option>女</option>
                                                    </select>
                                                </div>

                                                <span class="col-sm-1 control-label no-padding search-label">管理员：</span>
                                                <div class="col-sm-1 no-padding">
                                                    <select class="form-control input-sm select-width-70" id="q4">
                                                        <option>全部</option>
                                                        <option>是</option>
                                                        <option>否</option>
                                                    </select>
                                                </div>
                                                <span class="col-sm-1 control-label no-padding search-label">用户状态：</span>
                                                <div class="col-sm-1 no-padding">
                                                    <select class="form-control input-sm select-width-70" id="q5">
                                                        <option>全部</option>
                                                        <option>是</option>
                                                        <option>否</option>
                                                    </select>
                                                </div>
                                                <a class="btn btn-sm btn-primary" style="position: absolute;right: 10px;" id="searchBtn">查询</a>
                                            </div>
                                        </form>
                                    </div>
                                    <!-- /.box-header -->
                                    <div class="box-body" style="margin-top: -4px">
                                        <table id="dataTable"
                                               class="table text-center table-striped table-bordered table-hover">
                                            <thead>
                                            <tr>
                                                <th>登录ID</th>
                                                <th>用户姓名</th>
                                                <th>所属部门</th>
                                                <th>性别</th>
                                                <th>管理员</th>
                                                <th>启用</th>
                                                <th>修改时间</th>
                                                <th>操作</th>
                                            </tr>
                                            </thead>
                                            <tbody id="dataTableBody">
                                            </tbody>
                                        </table>
                                    </div>
                                    <!-- /.box-body -->
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane" id="outsideEmp">
                        <div class="row">
                            <div class="col-lg-12 col-xs-12">
                                <div class="box box-default" style= "border: none;"> <!-- style="border-top: 0px solid #dfdfdf;" -->
                                    <div class="box-header" style="padding-bottom: 0">
                                        <form class="form-horizontal" style="margin-left: 10px;">
                                            <div class="form-group" style="margin-top: 10px">
                                                <span class="col-sm-1 control-label no-padding search-label">用户登录号：</span>
                                                <div class="col-sm-1 no-padding">
                                                    <input type="text" id="q21" class="input-sm form-control"
                                                           placeholder="" />
                                                </div>

                                                <span class="col-sm-1 control-label no-padding search-label">用户姓名：</span>
                                                <div class="col-sm-1 no-padding">
                                                    <input type="text" id="q22" class="input-sm form-control"
                                                           placeholder="" />
                                                </div>

                                                <span class="col-sm-1 control-label no-padding search-label">性别：</span>
                                                <div class="col-sm-1 no-padding">
                                                    <select class="form-control input-sm select-width-70" id="q23">
                                                        <option>全部</option>
                                                        <option>男</option>
                                                        <option>女</option>
                                                    </select>
                                                </div>

                                                <span class="col-sm-1 control-label no-padding search-label">管理员:</span>
                                                <div class="col-sm-1 no-padding">
                                                    <select class="form-control input-sm select-width-70" id="q24">
                                                        <option>全部</option>
                                                        <option>是</option>
                                                        <option>否</option>
                                                    </select>
                                                </div>
                                                <span class="col-sm-1 control-label no-padding search-label">用户状态：</span>
                                                <div class="col-sm-1 no-padding">
                                                    <select class="form-control input-sm select-width-70" id="q25">
                                                        <option>全部</option>
                                                        <option>是</option>
                                                        <option>否</option>
                                                    </select>
                                                </div>
                                                <a class="btn btn-sm btn-primary" style="position: absolute;right: 130px;" id="addBtn">添加</a>
                                                <a class="btn btn-sm btn-primary" style="position: absolute;right: 70px;" id="improtBtn">导入</a>
                                                <a class="btn btn-sm btn-primary" style="position: absolute;right: 10px;" id="searchBtn2">查询</a>
                                            </div>
                                        </form>
                                    </div>
                                    <!-- /.box-header -->
                                    <div class="box-body" style="margin-top: -4px">
                                        <table id="dataTable2"
                                               class="table text-center table-striped table-bordered table-hover">
                                            <thead>
                                            <tr>
                                                <th>登录ID</th>
                                                <th>用户姓名</th>
                                                <th>所属部门</th>
                                                <th>手机号</th>
                                                <th>性别</th>
                                                <th>管理员</th>
                                                <th>启用</th>
                                                <th>修改时间</th>
                                                <th>操作</th>
                                            </tr>
                                            </thead>
                                            <tbody id="dataTableBody2">
                                            </tbody>
                                        </table>
                                    </div>
                                    <!-- /.box-body -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
				<!-- 模态框（Modal） -->
				<div class="modal fade" id="modal" tabindex="-1" role="dialog"
					aria-labelledby="modal" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal"
									aria-hidden="true">&times;</button>
								<h6 class="modal-title" id="modalLable">客户信息：</h6>
							</div>
							<!-- form start -->
							<form id="form" class="form-horizontal" role="form"
								action="index/" method="post">
								<div class="modal-body">
									<div class="form-group" style="display: none;">
										<span class="col-sm-3 control-label">登录ID：</span> <input
											type="hidden" class="form-control" value="-1" />
										<div class="col-sm-5">
											<input type="text" class="form-control" name="loginId" id="loginId" placeholder="请输入登录ID" />
											<span class="required-spot marginl-207">＊</span>
										</div>
									</div>
									<div class="form-group">
										<span class="col-sm-3 control-label" style="font-size: 12px;">所属部门：</span>
										<div class="col-sm-5" style="padding-left:0;">
											<input type="text" class="form-control " required style="width: 200px; height: 24px; border-radius:5px; " name="deptName" id="deptName" placeholder="请输入归属部门" />
                                            <span class="required-spot marginl-207">＊</span>
										</div>
									</div>
									<div class="form-group">
										<span class="col-sm-3 control-label" style="font-size: 12px;">管理员：</span>
                                         	<div class="col-sm-1 no-padding">
                                                   <select class="form-control input-sm select-width-70" id="isAdmin" name="isAdmin" style="width: 100px; height: 24px;">
                                                        <option>是</option>
                                                        <option>否</option>
                                                    </select>
                                                <span class="required-spot marginl-107">＊</span>
                                                </div>
									</div>

									<div class="form-group">
										<span class="col-sm-3 control-label" style="font-size: 12px;">员工编号：</span>
										<div class="col-sm-5" style="padding-left:0;">
											<input type="text" class="form-control" style="width: 200px; height: 24px; border-radius:5px;" name="empNo"
												id="empNo" placeholder="员工编号" />
										</div>
									</div>
									<div class="form-group">
										<span class="col-sm-3 control-label" style="font-size: 12px;">员工姓名：</span>
										<div class="col-sm-5" style="padding-left:0;">
											<input type="text" class="form-control" required style="width: 200px; height: 24px; border-radius:5px;" name="empName" id="empName" placeholder="请输入员工姓名" />
                                            <span class="required-spot marginl-207">＊</span>
										</div>
									</div>
									<div class="form-group">
										<span class="col-sm-3 control-label" style="font-size: 12px;">密码：</span>
										<div class="col-sm-5" style="padding-left:0;">
											<input type="password" class="form-control" style="width: 200px; height: 24px; border-radius:5px;" name="password"
												id="password" placeholder="请输入密码" />
                                            <span style="display: inline-table;position: absolute;color: #666666;font-size: 12px;left: 210px;top: 3px;">
                                                默认为系统初始密码&nbsp;&nbsp;<a href="javascript:" onclick="">重置</a>
                                            </span>
										</div>
									</div>
									<div class="form-group">
										<span class="col-sm-3 control-label" style="font-size: 12px;">电话：</span>
										<div class="col-sm-5" style="padding-left:0;">
											<input type="text" class="form-control" style="width: 200px; height: 24px; border-radius:5px;" name="phoneNumber" id="phoneNumber" placeholder="请输入手机号" />
                                            <span class="required-spot marginl-207">＊</span>
										</div>
									</div>
									<div class="form-group">
										<span class="col-sm-3 control-label" style="font-size: 12px;">员工类型：</span>
                                         	<div class="col-sm-1 no-padding">
                                                   <select class="form-control input-sm select-width-70" id="type" name="type" style="width: 100px; height: 24px;">
                                                        <option>内部员工</option>
                                                        <option>外部客户</option>
                                                    </select>
                                                <span class="required-spot marginl-107">＊</span>
                                                </div>
									</div>
									<div class="form-group">
										<span class="col-sm-3 control-label" style="font-size: 12px;">备注：</span>
										<div class="col-sm-5" style="padding-left:0;">
											<textarea rows="10" cols="100" class="form-control" style="width: 200px; height: 80px; border-radius:5px;" name="remark"
												id="remark"></textarea>
										</div>
									</div>
									<div class="form-group"></div>
									<div class="form-group text-center">
										<span class="col-sm-3 control-label"></span>
										<div class="col-sm-5" style="padding-left:0;">
											<button type="button" class="btn btn-sm btn-primary submit" onclick="User2.formSubmit()">保存</button>
											<button type="button" class="btn btn-sm btn-primary" data-dismiss="modal">返回</button>
										</div>
									</div>
								</div>
								<!-- /.box-body -->
							</form>
						</div>
					</div>
					<!-- /.modal-content -->
				</div>
				<!-- 授权modal -->
                <div class="modal fade" id="impowerModal" tabindex="-1" role="dialog"
                     aria-labelledby="modal" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal"
                                        aria-hidden="true">&times;</button>
                                <h6 class="modal-title">角色授权：</h6>
                            </div>
                            <div class="modal-body">
                                <div id="tree" style="min-height: 100px;max-height:300px;overflow-y: auto">
                                </div>
                                <div class="row text-center">
                                    <span class="col-sm-3 control-label"></span>
                                    <div class="col-sm-5" style="padding-left:0;">
                                        <button type="button" class="btn btn-sm btn-primary submit" onclick="User.impowerSubmit()">保存</button>
                                        <button type="button" class="btn btn-sm btn-primary" data-dismiss="modal">返回</button>
                                    </div>
                                </div>
                            </div>
                            <!-- /.box-body -->
                        </div>
                    </div>
                    <!-- /.modal-content -->
                </div>
			</section>
			<!-- /.content -->
		</div>
    </div>
		<!-- jQuery 2.1.4 -->
		<script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>
		<!-- jQuery UI 1.11.4 -->
		<script src="plugins/jQueryUI/jquery-ui.min.js"></script>
		<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
		<script>
        $.widget.bridge('uibutton', $.ui.button);
    </script>
		<!-- Bootstrap 3.3.5 -->
		<script src="js/bootstrap.min.js"></script>
		<!-- Select2 -->
		<script src="plugins/select2/select2.min.js"></script>
		<!-- jstree -->
		<script src="plugins/jstree/dist/jstree.min.js"></script>
		<!-- DataTables -->
		<script src="plugins/datatables/jquery.dataTables.min.js"></script>
		<script src="plugins/datatables/dataTables.bootstrap.min.js"></script>
		<!-- AdminLTE App -->
		<script src="js/app.min.js"></script>
		<!-- AdminLTE for demo purposes -->
		<script src="js/demo.js"></script>
		<!--<script src="js/bootstrap-toggle.min.js"></script>-->
		<script src="js/mymodal.js"></script>
		<script src="plugins/jqueryform/jquery.form.js"></script>
        <script src="plugins/bootstrap-validate/bootstrapValidator.min.js"></script>
        <script src="plugins/bootstrap-validate/zh_CN.js"></script>
		<script src="js/module/Global.js" type="text/javascript"></script>
		<script src="js/module/common-ajax.js" type="text/javascript"></script>
		<script src="js/module/common-datatable.js" type="text/javascript"></script>

		<script type="text/javascript">
        //定义界面操作对象
        var User = {
            table: dataTable,
            selectId:null,
            //表单提交回调
            formCallBack : {
                success : function (data) {
                    $('#modal').modal('hide');
                    User.table.reload();
                    MyModal.alert('成功!');
                },
                error : function() {
                    MyModal.alert({message:'系统发生错误!',modalClass:'modal-danger'});
                }
            }
        };
        //定义表格列渲染
        User.tableCol = function () {
            return [
                {"data": "loginId"},
                {"data": "userName"},
                {"data": "deptName"},
                {"data": "sex"},
                {"data": "isAdmin"},
                {"data": "isStart"},
                {"data": "updateTime"},
                {
                    "data": "id", "mRender": function (id) {
                        return '<img src="img/icon/修改.png" class="btn btn-xs" onclick="User.update(' + id + ')" width=“28px” height="20px"/> ' +
                            '<img src="img/icon/删除.png" class="btn btn-xs" onclick="User.delete(' + id + ')" width=“28px” height="20px"/>' +
                            '<img src="img/icon/授权.png" class="btn btn-xs" onclick="User.impower(' + id + ')" width=“28px” height="20px"/>';
                    }
                }
            ];
        };
        //查询数据
        User.query = function () {
            //获取数据列定义
            const col = User.tableCol();
            //创建表格对象
            const table = new CommonTable('dataTable', 'index/find/', col, 'data');
            User.table = table;
            //设置服务器分页
            table.setServerSide(true);
            table.setData({"q1": $('#q1').val(),"q2": $('#q2').val(),"q3": $('#q3').val(),"q4": $('#q4').val(),"q5": $('#q5').val()});
            //表格实例化
            table.init();
        };
        User.update = function (id) {
            new $ajax('/index/'+id,function (data) {
                //查询赋值
                const form = $("#form");
                form.find('#loginId').val(data.loginId);
                form.find('#userName').val(data.userName);
                form.find('#sex').val(data.sex);
                form.find('#isAdmin').val(data.isAdmin);
                form.find('#isStart').val(data.isStart);
                $('#modal').modal();
            }).doGet().start();
        };

        //删除
        User.delete = function (id) {
            MyModal.confirm({message : '是否确定删除？'}).on(function(param){
                if(param){
                    new $ajax('index/'+id,function (data) {
                    		User.table.reload();
                        MyModal.alert('成功!');
                    }).doDelete().start();
                }
            });
        };
        //授权
        User.impower = function () {
            $('#tree').jstree({
                'plugins': [ "checkbox","types"],
                'checkbox': { cascade: ""},
                'core': {
                    'data' : {
                        "url" : "index/treeData"
                    },
                    "themes" : { "stripes" : false }
                },
                "types" : {
                    "default" : {
                        "icon" : "img/icon/treeIcon.png"
                    }
                }

            });
            $('#impowerModal').modal();
        };
        User.impowerSubmit = function () {
            //获取选中的节点信息
            console.info($('#tree').jstree('get_selected',{full:true}));
            //获取选中的节点ID数组
            console.info($('#tree').jstree('get_selected'));
        };
        //界面初始化操作
        $(function () {
            //第一次初始化
            User.query();
            //查询按钮触发
            $('#searchBtn').off('click').on('click',User.query);
        });

        //定义界面操作对象
        var User2 = {
            table: dataTable2,
            selectId:null,
            //表单提交回调
            formCallBack : {
                success : function (data) {
                	if (!data.success) {
                		MyModal.alert(data.message);
                	}else{
                		$('#modal').modal('hide');
                        User2.table.reload();
                        MyModal.alert('成功!');
                        $('#form').data("bootstrapValidator").resetForm();
                	}
                },
                error : function() {
                    MyModal.alert({message:'系统发生错误!',modalClass:'modal-danger'});
                }
            }
        };
        //定义表格列渲染
        User2.tableCol = function () {
            return [
                {"data": "loginId"},
                {"data": "userName"},
                {"data": "deptName"},
                {"data": "phoneNumber"},
                {"data": "sex"},
                {"data": "isAdmin"},
                {"data": "isStart"},
                {"data": "updateTime"},
                {
                    "data": "id", "mRender": function (id) {
                        return '<img src="img/icon/修改.png" class="btn btn-xs" onclick="User2.update(' + id + ')" width=“28px” height="20px"/> ' +
                            '<img src="img/icon/删除.png" class="btn btn-xs" onclick="User2.delete(' + id + ')" width=“28px” height="20px"/>' +
                            '<img src="img/icon/授权.png" class="btn btn-xs" onclick="User2.allot(' + id + ')" width=“28px” height="20px"/>';
                    }
                }
            ];
        };
        //查询数据
        User2.query = function () {
            //获取数据列定义
            const col = User2.tableCol();
            //创建表格对象
            const table = new CommonTable('dataTable2', 'index/find/', col, 'data');
            User2.table = table;
            //设置服务器分页
            table.setServerSide(true);
            table.setData({"q1": $('#q21').val(),"q2": $('#q22').val(),"q3": $('#q23').val(),"q4": $('#q24').val(),"q5": $('#q52').val()});
            //表格实例化
            table.init();
        };
        User2.formSubmit = function () {
            //检查表单
            var $form = $('#form');
            if($form.data('bootstrapValidator').validate().isValid()){
                $form.ajaxSubmit(User2.formCallBack);
            }
        };
        User2.add = function () {
            $('#modal').modal();
        };
        User2.update = function (id) {
            new $ajax('/index/'+id,function (data) {
                //查询赋值
                const form = $("#form");
                form.find('#loginId').val(data.loginId);
                form.find('#userName').val(data.userName);
                form.find('#sex').val(data.sex);
                form.find('#isAdmin').val(data.isAdmin);
                form.find('#isStart').val(data.isStart);
                $('#modal').modal();
            }).doGet().start();
        };

        //删除
        User2.delete = function (id) {
            MyModal.confirm({message : '是否确定删除？'}).on(function(param){
                if(param){
                    new $ajax('index/'+id,function (data) {
                    		User2.table.reload();
                        MyModal.alert('成功!');
                    }).doDelete().start();
                }
            });
        };
        //界面初始化操作
        $(function () {
            //第一次初始化
            User2.query();
            //注册form为验证表单
            Global.registerValidForm('form',{
                //phoneNumber为表单元素的name
                phoneNumber:{
                    validators: {
                        notEmpty: {
                            message: '手机号码不能为空'
                        },
                        stringLength: {
                            min: 11,
                            max: 11,
                            message: '请输入11位手机号码'
                        },
                        regexp: {
                            regexp: /^1[3|5|8]{1}[0-9]{9}$/,
                            message: '请输入正确的手机号码'
                        }
                    }
                }
            });
            //查询按钮触发
            $('#searchBtn2').off('click').on('click',User2.query);
            //添加按钮触发
            $('#addBtn').off('click').on('click',User2.add);
        });
        //idea modify
    </script>
</body>
</html>